<template>
    <view>
        <view class="avatar">
            <u-avatar src="/static/avatar.jpg" size="90"></u-avatar>
        </view>

        <view style="width: 90%">
            <u--form
                labelWidth="90"
                labelAlign="center"
                :model="admin"
                :rules="rules"
                ref="uForm"
            >
                <u-form-item label="用户名" prop="username" class="item">
                    <u--input v-model="admin.username"></u--input>
                </u-form-item>
                <u-form-item label="密码" prop="password" class="item">
                    <u--input v-model="admin.password" password></u--input>
                </u-form-item>
                <!-- 用户协议 -->
                <u-form-item label=" " prop="agreement" class="item">
                    <view class="agreement">
                        <u-checkbox-group v-model="admin.agreement">
                            <u-checkbox
                                name="agreement"
                                label="我已阅读并同意"
                            />
                            <navigator class="url" url="/pages/index/agreement"
                                >用户服务协议、隐私政策</navigator
                            >
                        </u-checkbox-group>
                    </view>
                </u-form-item>
            </u--form>
        </view>

        <u-button
            type="warning"
            icon="pushpin-fill"
            @click="onBind"
            :customStyle="btnStyle"
        >
            登录
        </u-button>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data() {
        return {
            admin: {
                username: '',
                password: '',
                agreement: [],
            },
            rules: {
                username: {
                    type: 'string',
                    required: true,
                    message: '请填写用户名',
                    trigger: ['blur', 'change'],
                },
                password: {
                    type: 'string',
                    required: true,
                    message: '请填写密码',
                    trigger: ['blur', 'change'],
                },
                agreement: {
                    type: 'array',
                    required: true,
                    message: '请阅读用户协议',
                    trigger: ['blur', 'change'],
                },
            },
            btnStyle: {
                marginTop: '10px',
            },
        };
    },
    methods: {
        onBind()
        {
            this.$refs.uForm.validate().then(async () => {
                let data = {
                    username:this.admin.username,
                    password:this.admin.password
                }

                let result = await this.$u.api.admin.login(data);

                if(result && result.code === 1)
                {
                    this.$refs.uToast.show({
                        type:'success',
                        message:result.msg,
                        complete:() => {
                            uni.setStorageSync('admin',result.data);

                            this.$u.route({
                                type:'back'
                            });
                        }
                    });

                    return;
                }else{
                    this.$refs.uToast.show({
                        type:'error',
                        message:result.msg
                    });

                    return;
                }

            }).catch((err) => {
                console.log(err);
            });
        }
    },
};
</script>

<style>
.avatar {
    text-align: center;
}

.u-avatar {
    margin: 80rpx auto 40rpx;
}

.img-captcha {
    display: block !important;
}

.btn-submit {
    margin-top: 40rpx !important;
}

.href-bindmobile {
    margin-top: 40rpx;
    text-align: center;
    font-size: 14px;
    color: var(--color-primary);
}

.u-form .u-form-item__body__right__message {
    margin-left: 0px !important;
}
/* #ifdef MP-WEIXIN  */
/deep/.u-form .u-form-item__body__right__message {
    margin-left: 90px !important;
}
/* #endif    */

.agreement {
    margin-top: 0.7em;
    display: flex;
}

.agreement .url {
    color: #3c9cff;
    margin-left: 2px;
}
</style>
